<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet"  href="css/base.css"/>
		<script src="js/jquery.min.js"></script>
		<link href="主页demo/js/layui/css/layui.css" rel="stylesheet"/>
		<script src="主页demo/js/layui/layui.js"></script>
		<link rel<link rel="stylesheet"  href="css/common.css"/>
		<style>
			.main{
				width: 200px;
				height: 100px;
				overflow: hidden;
				border: 1px solid red;
			}
			.scoll{
				width: 400px;
				height: 100%;
				border: 1px solid blue;
					/* animation: scoll2 4s linear 0.2s infinite; */
				animation: scoll1 4s linear 0.2s infinite;
			}
		/* 	@keyframes scoll2{
				0%{
					margin-left: 0px;
				}
				50%{
					margin-left: -400px;
				}
				60%{
					margin-left: 200px;
				}
				100%{
					margin-left: 0px;
				}
			} */
			@keyframes scoll1{
				from{
					transform: translate3d(100%,0,0) ;
				}
				to{
					transform: translate3d(-100%,0,0)
				}
			}
		</style>
	</head>
	<body>
		
		<div id="" class="main">
			<div id="scoll" class="scoll">
				左右滚动
			</div>
		</div>
	</body>
</html>
